<template>
  <view
    class="suanli_box"
    :style="{ backgroundImage: 'url(' + bgimg + ')' }"
    @tap.stop="goDetail"
  >
    <view class="top_box flex">
      <view class="suanli_name" v-if="locale == 'zh_TW'">
        {{ suanli.name }}
      </view>
      <view class="suanli_name" v-else>
        {{ suanli.name_en }}
      </view>
      <view class="suanli_day"> {{ suanli.days }}{{ $t("mf.shop.day") }} </view>
      <!-- <view class="flex1" style="text-align: right">
        {{ suanli.price }}{{ suanli.pay_symbol }}
      </view> -->
      <image src="/static/mf/shop/explain.png" @tap.stop="goAgreement" />
    </view>
    <view class="center_box flex">
      <view class="profit">{{ suanli.ratio }}%</view>
      <view class="yugu">{{ $t("new.year_reward") }}</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    suanli: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    goDetail() {
      this.handleNavTo({
        url: "/pages/mf/shop/buySuanli?id=" + this.suanli.id,
      });
    },
    goAgreement() {
      this.handleNavTo({
        url: "/pages/mf/shop/agreement",
      });
    },
  },
  computed: {
    ...mapGetters("system", ["locale"]),
    bgimg() {
      let num = this.suanli.id % 2;
      return `/static/mf/shop/suanli${num}.png`;
    },
  },
};
</script>

<style scoped>
.suanli_box {
  width: 100%;
  height: 266rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  padding: 40rpx;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.top_box {
  width: 100%;
  height: 53rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 53rpx;
  margin-bottom: 40rpx;
  align-items: center;
}
.suanli_name {
  width: 179rpx;
  height: 53rpx;
  background-image: url("/static/mf/shop/title_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fee096;
  line-height: 53rpx;
}
.suanli_day {
  margin-left: 35rpx;
  height: 42rpx;
  font-size: 30rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #22233d;
  line-height: 42rpx;
  flex: 1;
}
.top_box image {
  width: 33rpx;
  height: 33rpx;
}
.center_box {
  height: 84rpx;
  font-size: 60rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 84rpx;
  margin-bottom: 10rpx;
  align-items: center;
}
.bottom_box {
  align-items: center;
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 40rpx;
}
.bottom_box image {
  width: 40rpx;
  height: 40rpx;
}
.profit {
  height: 70rpx;
  font-size: 60rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #1d1e3a;
  line-height: 70rpx;
  margin-right: 70rpx;
}
.yugu {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #22233d;
  line-height: 42rpx;
}
</style>